<template>
    <div>
        <div class="content">
            <div style="font-size:.2rem;margin-top:.2rem;margin-bottom:.2rem"><router-link to="/cart" style="color:#000">查看购物车详情</router-link></div>
            <div v-if="empty" >
                    <div style="font-size:.2rem" class="stitle">
                        <span style="width:1.5rem;text-align:center">商品图片</span><span style="width:2rem;text-align:center">商品信息</span><span style="width:1.5rem;text-align:center">单价</span><span style="width:.8rem;text-align:center">数量</span><span style="width:1.2rem;text-align:center">总价</span><span style="width:1.2rem;text-align:center">删除</span>
                    </div>
                    <div class="item" v-for="(item,index) of cartList" :key="index">
                        <img :src="item.pic1" class="cartImg">
                        <div class="title">[宅寂]{{item.name}}<br>原木色</div>
                        <div class="price">￥{{item.price}}</div>
                        <div class="Num">

                            <div class="num">{{item.count}}</div>

                        </div>
                        <div class="price">￥{{item.price*item.count}}</div>
                        <div class="Num">
                                 <span class="cardel" @click="delChange(item,index)" ></span>
                        </div>

                    </div>
                </div>
                <div v-else class="empty">
                    购物车空空如也~
                </div>
        </div>
    </div>
</template>
<script>
import Vue from 'vue'
export default {
    data(){
        return{
            empty:true,
            cartList:[]
        }
    },
    methods:{
        delChange(item,index){
            var cartnum=0,totelprice=0,cartclass=0;
            this.axios({
                url:`${this.$config.dataUrl}/v1/cart/deleteCartcent?uid=${this.$store.getters.uid}&cid=${item.cid}`,
                method:"get"
            }).then(res=>{
                //console.log(res)
            })
            this.cartList.splice(index,1);

            this.$store.dispatch('setcartNum',cartnum);
            if(this.cartList.length<=0){
                this.empty=false;
            }
        }
    },
  beforeMount(){
        //this.$store.dispatch('setUid',-1)
        // console.log('uid',this.$store.getters.uid)
        //渲染该用户的购物车信息
        this.axios({
            //url:`http://${this.$store.state.adminPath}/v1/cart/selectCart?uid=${this.$store.getters.uid}`,
            url:`${this.$config.dataUrl}/v1/cart/selectCart?uid=${this.$store.getters.uid}`,
            method:"get"
        }).then(res=>{
            if(res.status == '200' ){
                for(var i=0;i<res.data.length;i++){
                    this.cartList.push(res.data[i]);
                }

                this.cartList.length>0?this.empty=true:this.empty=false;
            }
            console.log('cartList',this.cartList)
        })}
}

</script>

<style scoped lang="scss" deep>
.stitle span{
    display: inline-block
}
.cardel{
        padding:10px 10px;
        margin-left:.2rem;
        float:right;
        background:url("../../assets/img/icons/sprite2.png") 0 -55px;
    }
    .cardel:hover{
        background-position:-33px -54px;
    }
    .banner{
        height: 0.3rem
    }
    hr{
        margin-bottom: 0;
    }
    .content{
        width:100%;
/*         height: 20rem; */

        /* background-color: lightblue */

    }
    .top{
        font-size: 0.14rem;
        overflow: hidden;
    }
    .back{
        font-size: 0.16rem;
        height: 0.16rem
    }
    .num{
        font-size: 0.24rem;
        float: left;
    }
    .sumup{
        float: right;
    }
    .SumUp{
        width:1.3rem;
        height:0.3rem;
        background:rgba(180,157,126,1);
        border-radius:0.02rem;
        font-size:0.14rem;
        font-family:MicrosoftYaHei;
        font-weight:400;
        color:rgba(255,255,255,1);
        text-align: center;
        line-height: 0.3rem;
        float: right;
        cursor: pointer;
        -webkit-user-select:none;
            -moz-user-select:none;
            -ms-user-select:none;
            user-select:none;
    }

    .infos{
        margin-top: 0.25rem;
        height:0.51rem;
        background:rgba(180,157,126,1);
        font-size:0.14rem;
        font-family:MicrosoftYaHei;
        font-weight:400;
        color:rgba(255,255,255,1);
        text-align: center;
        line-height: 0.51rem;
    }
    .info{
        overflow: hidden;
        float: left;
    }
    .info1{
        margin-right: 1.81rem;
    }
    .info2{
        margin-right: 2.7rem;
    }
    .info3{
        margin-right: 1.5rem;
    }
    .info4{
        margin-right: 1.48rem;
    }
    .info5{
        margin-right: 1.47rem;
    }
    #all{
        border:1px solid rgba(238,238,238,1);
        border-radius:0.02rem;
        color: #fff;
        margin:0.16rem 0.11rem 0.16rem 0.24rem;
    }
    .info1 div{
        float: left;
    }

    .item{
        width:100%;
        height:1.41rem;
        border-bottom:1px solid rgba(232,232,232,1);
        overflow: hidden;
        font-family:MicrosoftYaHei;
        font-weight:400;
        color:rgba(67,67,67,1);
    }
    .item input{
        float: left;
        margin: 0.67rem 0.31rem 0.65rem 0.57rem;
    }
    .item .cartImg{
        width:1.5rem;
        height:0.81rem;
        float: left;
        margin: 0.31rem 0 0 0
    }
    .item .title{
        width: 2rem;
        font-size:0.14rem;
        float: left;
        margin: 0.55rem 0 0 0;
        text-align: center
    }
    .item .price{
        width: 1.6rem;
        font-size:0.14rem;
        float: left;
        margin: 0.65rem 0 0 0;
        text-align: center
    }

    .item .Num{
        float: left;
        font-size:0.18rem;
        font-family:ArialMT;
        margin-top: 0.65rem;
        vertical-align: middle;
    }
    .item .Num div{
        width: 0.5rem;
        float: left;
        text-align: center;
    }
    .item .Num .dec{
        width:0.3rem;
        height:0.3rem;
        border:0.01rem solid rgba(67,67,67,1);
        cursor: pointer;
    }
    .item .Num .inc{
        width:0.3rem;
        height:0.3rem;
        border:0.01rem solid rgba(67,67,67,1);
        cursor: pointer;
    }
    .Num{
        -webkit-user-select:none;
            -moz-user-select:none;
            -ms-user-select:none;
            user-select:none;
    }
    .item .num{
        line-height: 0.3rem;
    }
    .item .allPrice{
        width: 1.8rem !important;
        float: left;
        font-size:0.14rem;

    }
    .item .del{
        width: 0.3rem;
        height: 0.3rem;
        background-image:url('../../assets/img/icons/sprite2.png');//!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!图片路径问题
        background-position: 0rem -0.78rem;
        float: left;
        margin: 0.61rem 0.1rem 0 0;
        cursor: pointer;
    }
    .item .like{
        width: 0.3rem;
        height: 0.3rem;
        background-image:url('../../assets/img/icons/sprite2.png');//!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!图片路径问题
        background-position: 0rem -1.23rem;
        float: left;
        margin: 0.61rem 0 0 0;
        cursor: pointer;
    }
    .item .liked{
        background-position: -0.46rem -1.23rem;
    }
    .Price{

        overflow: hidden;
        font-size: 0.14rem;
    }
    .AllPrice{
        font-size:0.18rem;
        float: left;
    }
    .InfoName{
        float: left;
        margin: 0.3rem 0.74rem 0 0;
    }
    .thprice{
        float: left;
        margin: 0.3rem 0 0 0;
    }

    .bot{
        height:0.5rem;
        background:rgba(242,242,242,1);
        font-size: 0.16rem;
        line-height: 0.5rem;
    }

    .bot .bot1{
        float: left;
        margin-left: 0.23rem;
    }
    .bot .bot2{
        float: right;
        margin-right: 0.1rem;
    }
    .bot button{
        float: right;
        width:1.6rem;
        height:0.5rem;
        background:rgba(180,157,126,1);
        font-size:0.16rem;
        color:rgba(255,255,255,1);
        border: 0;
        cursor: pointer;
    }
    .recom{
        font-size:0.28rem;
        color:rgba(180,157,126,1);
        margin: 0.71rem 5.16rem 0.4rem;
    }
    .recomPic ul{
        padding-inline-start: 0;
        overflow: hidden;
    }
    .recomPic li{
        list-style : none;
        width      : 2.8rem;
        height     : 4.38rem;
        margin-left: 0.265rem;
        margin-bottom: 0.5rem;
        position   : relative;
        transition : all 0.4s;
        float: left;
        -webkit-user-select:none;
            -moz-user-select:none;
            -ms-user-select:none;
            user-select:none;
    }
    .recomPic li:hover{
        box-shadow: 0px 12px 25px 3px rgba(95,92,92,0.34);
    }
    .recomPic li:hover .cilckBtn{
        font-size      : 0.18rem;
        position       : absolute;
        display        : flex;
        justify-content: center;
        width          : 100%;
        margin-bottom  : 0;
        left: 0.77rem;
        bottom         : 0;
        cursor         : pointer;
        width           : 1.33rem;
        height          : 0.42rem;
        line-height     : 0.42rem;
        text-align      : center;
        border:0.01rem solid rgba(67,67,67,1);
        display: block;
    }
    .recomPic li img{
        width: 100%;
        height: 100%;
    }
    .recomTitle{
        font-size      : 0.24rem;
        position       : absolute;
        display        : flex;
        justify-content: center;
        width          : 100%;
        margin-bottom  : 0;
        bottom         : 1.14rem;
    }
    .recomPrice{
        width:0.95rem;
        height:0.25rem;
        background:rgba(180,157,126,1);
        font-size:0.18rem;
        font-family:HYQiHei-DES;
        font-weight:normal;
        color:rgba(255,255,255,1);
        position: absolute;
        left: 0.93rem;
        bottom: -0.2rem;
        text-align: center;
        line-height: 0.25rem;
    }
    .cilckBtn{
        font-size      : 0.18rem;
        position       : absolute;
        display        : flex;
        justify-content: center;
        width          : 100%;
        margin-bottom  : 0;
        left: 0.77rem;
        bottom         : 0;
        cursor         : pointer;
        width           : 1.33rem;
        height          : 0.42rem;
        line-height     : 0.42rem;
        text-align      : center;
        border:0.01rem solid rgba(67,67,67,1);
        display: none;
    }
    #modal1{
        font-size: 0.2rem;
    }
    #modal1 li{
        list-style: none;
        font-size: 0.2rem;
    }
    .empty{

        height: 2rem;
        font-size: 0.2rem;
        line-height: 2rem;
        text-align: center;
        border-bottom: 0.01rem solid #b49d7e;
    }
</style>
<style>
.modal-title{
    font-size: 0.3rem
}
.modal-header{
    padding: 0.1rem;
    padding-left: 0.2rem;
}
.modal-header .close{
    padding: 0;
    margin: 0;
}
.close{
    font-size: 0.5rem
}
.modal-body{
    padding: 0.4rem;
}
.btn{
    font-size: 0.18rem;
    padding: 0.1rem 0.2rem;
}
.modal-footer{
    padding: 0.2rem;
}
.modal-dialog{
    max-width: 12rem;
}
.table{
    margin-bottom: 0;
}
.mt-3, .my-3{
    margin-top: 0.5rem !important;
}
.table th, .table td{
    padding: 0.1rem;
}
.custom-control-inline{
    margin-right: 0;
}
.custom-control{
    padding-left: 0.5rem;
}
.custom-control-label::before{
    width: 0.2rem;
    height: 0.2rem;
    left: -0.2rem;
}
.custom-control-label::after{
     width: 0.2rem;
    height: 0.2rem;
    left: -0.2rem;
}
.custom-control{
    min-height: 0.45rem;
}
.alert{

}
.alert-dismissible{
    padding: 0
}
.alert{
    padding: 0.1rem 0.1rem ;
    font-size: 0.2rem;
    width:5rem;
    position: absolute;
    top: 3rem;
    left: 40%;
}
.alert-dismissible .close{
    padding: 0.05rem 0.05rem ;
    right: 0.07rem;
    top: -0.02rem;
}
.close{
    font-size: 0.4rem
}
</style>
